screenshot: Move close button to the panel

CSS and JS adapted from the Overview window close buttons, but with some
style tweaks requested by the designers.

Since the screenshot UI is long-lived (it's created once at startup,
rather than every time it's opened), we need to refresh the close button
position, as it can change at runtime. Subscribing to preference changes
seems to be skipped for bindings generation in Mutter, but simply
refreshing upon opening the UI should do the job.

Closes https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/4997

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2147>

diff --git a/data/theme/gnome-shell-sass/widgets/_screenshot.scss b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
index 870333edc278cb5c9b6602edd846bbccfc1cc8f6..1113606ebc99d5866644a2d22814b1f3b9e9a62c 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_screenshot.scss
+++ b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
@@ -28,17 +28,26 @@ $screenshot_ui_button_red: #e01b24;
 
 .screenshot-ui-close-button {
   background-color: $osd_bg_color;
+  color: $osd_fg_color;
   border-radius: 99px;
-  width: 64px;
-  height: 64px;
-  margin: 64px;
+  padding: 6px;
+  height: 30px;
+  width: 30px;
+  box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5);
+  margin-top: 8px;
 
-  &:hover, &:focus { background-color: $hover_bg_color; }
-  &:active { background-color: $active_bg_color; }
-  &:checked { background-color: darken($osd_bg_color, 5%); }
+  &.left { margin-left: 8px; }
+  &.right { margin-right: 8px; }
 
-  StIcon {
-    icon-size: $base_icon_size * 2;
+  & StIcon { icon-size: 24px; }
+
+  &:hover {
+    background-color: lighten($osd_bg_color, 15%);
+  }
+
+  &:active {
+    color: transparentize($osd_fg_color, 0.2);
+    background-color: darken($osd_bg_color, 5%);
   }
 }
 

diff --git a/js/ui/screenshot.js b/js/ui/screenshot.js
index fc3334fb7316026445fe4b4e10d0f3a76bacf3db..544513fec86cf01d44172ba7daa7eea71692cca8 100644 (file)
--- a/js/ui/screenshot.js
+++ b/js/ui/screenshot.js
@@ -1,7 +1,7 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported ScreenshotService, ScreenshotUI, showScreenshotUI */
 
-const { Clutter, Cogl, Gio, GObject, GLib, Gtk, Meta, Shell, St } = imports.gi;
+const { Clutter, Cogl, Gio, GObject, GLib, Graphene, Gtk, Meta, Shell, St } = imports.gi;
 
 const GrabHelper = imports.ui.grabHelper;
 const Layout = imports.ui.layout;
@@ -1089,12 +1089,24 @@ var ScreenshotUI = GObject.registerClass({
 
         this._closeButton = new St.Button({
             style_class: 'screenshot-ui-close-button',
-            x_align: Clutter.ActorAlign.END,
-            y_align: Clutter.ActorAlign.START,
-            x_expand: true,
-            y_expand: true,
+            child: new St.Icon({ icon_name: 'preview-close-symbolic' }),
         });
-        this._closeButton.set_child(new St.Icon({ icon_name: 'window-close-symbolic' }));
+        this._closeButton.add_constraint(new Clutter.BindConstraint({
+            source: this._panel,
+            coordinate: Clutter.BindCoordinate.POSITION,
+        }));
+        this._closeButton.add_constraint(new Clutter.AlignConstraint({
+            source: this._panel,
+            align_axis: Clutter.AlignAxis.Y_AXIS,
+            pivot_point: new Graphene.Point({ x: -1, y: 0.5 }),
+            factor: 0,
+        }));
+        this._closeButtonXAlignConstraint = new Clutter.AlignConstraint({
+            source: this._panel,
+            align_axis: Clutter.AlignAxis.X_AXIS,
+            pivot_point: new Graphene.Point({ x: 0.5, y: -1 }),
+        });
+        this._closeButton.add_constraint(this._closeButtonXAlignConstraint);
         this._closeButton.connect('clicked', () => this.close());
         this._primaryMonitorBin.add_child(this._closeButton);
 
@@ -1281,6 +1293,21 @@ var ScreenshotUI = GObject.registerClass({
         );
     }
 
+    _refreshButtonLayout() {
+        const buttonLayout = Meta.prefs_get_button_layout();
+
+        this._closeButton.remove_style_class_name('left');
+        this._closeButton.remove_style_class_name('right');
+
+        if (buttonLayout.left_buttons.includes(Meta.ButtonFunction.CLOSE)) {
+            this._closeButton.add_style_class_name('left');
+            this._closeButtonXAlignConstraint.factor = 0;
+        } else {
+            this._closeButton.add_style_class_name('right');
+            this._closeButtonXAlignConstraint.factor = 1;
+        }
+    }
+
     _rebuildMonitorBins() {
         for (const bin of this._monitorBins)
             bin.destroy();
@@ -1429,6 +1456,8 @@ var ScreenshotUI = GObject.registerClass({
         if (!grabResult)
             return;
 
+        this._refreshButtonLayout();
+
         this.remove_all_transitions();
         this.visible = true;
         this.ease({